<template>
  <div class="mastering-situation">
    <common-card>
      <template #title>知识点掌握情况</template>
      <!-- <template #operate
        ><span class="operate"
          ><label class="operate__icon"></label
          ><span class="operate__desc">导出</span></span
        ></template
      > -->
      <a-table
        class="table"
        :columns="COLUMNS"
        :dataSource="dataList"
        :showSorterTooltip="false"
        :scroll="{ y: 600, x: 700 }"
        :pagination="false"
      >
        <template v-slot:bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'knowledge_name'">
            <span
              :style="{ color: record.right_rate < 0.6 ? '#FF7B73' : '' }"
              >{{ record.knowledge_name }}</span
            ></template
          >
          <template v-if="column.dataIndex === 'grade_right_rate'">
            <span class="rate-item">
              <label
                v-if="record.grade_right_rate >= 0"
                class="dot"
                :style="{
                  background: getColor(record.grade_right_rate)
                }"
              ></label>
              {{ getPercent(record.grade_right_rate) }}%</span
            ></template
          >
          <template v-if="column.dataIndex.indexOf('__right_rate') > -1">
            <span class="rate-item">
              <label
                v-if="
                  record.class_info[getIndex(column.dataIndex)].right_rate >= 0
                "
                class="dot"
                :style="{
                  background: getColor(
                    record.class_info[getIndex(column.dataIndex)].right_rate
                  )
                }"
              ></label
              >{{
                record.class_info[getIndex(column.dataIndex)].right_rate >= 0
                  ? getPercent(
                      record.class_info[getIndex(column.dataIndex)].right_rate
                    ) + '%'
                  : '-'
              }}
            </span>
          </template>
          <template v-if="column.dataIndex.indexOf('__count') > -1">
            {{
              record.class_info[getIndex(column.dataIndex)].count >= 0
                ? record.class_info[getIndex(column.dataIndex)].count
                : '-'
            }}
          </template>
        </template>
      </a-table>
    </common-card>
  </div>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { getPercent } from '../utils'
import { getKnowledgeDetail } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { ref, onMounted, computed } from 'vue'
const situationReport = useSituationReport()

const dataList = ref([])
const COLUMNS = computed(() => {
  const list = [
    {
      title: '知识点',
      dataIndex: 'knowledge_name',
      key: 'knowledge_name',
      align: 'center'
    },
    {
      title: '年级正确率',
      dataIndex: 'grade_right_rate',
      key: 'grade_right_rate',
      align: 'center',
      sorter: (a, b) => a.grade_right_rate - b.grade_right_rate
    },
    {
      title: '题目数',
      dataIndex: 'question_count',
      key: 'question_count',
      align: 'center'
    }
  ]
  if (
    dataList.value.length > 0 &&
    dataList.value[0].class_info &&
    dataList.value[0].class_info.length > 0
  ) {
    dataList.value[0].class_info.forEach((item, index) => {
      list.push({
        title: item.class_name,
        dataIndex: item.class_id,
        key: item.class_id,
        align: 'center',
        children: [
          {
            title: '正确率',
            dataIndex: `${index}__right_rate`,
            key: `${index}__right_rate`,
            align: 'center',
            sorter: (a, b) =>
              a.class_info[index].right_rate - b.class_info[index].right_rate
          },
          {
            title: '题目数',
            align: 'center',
            dataIndex: `${index}__count`,
            key: `${index}__count`,
            sorter: (a, b) =>
              a.class_info[index].count - b.class_info[index].count
          }
        ]
      })
    })
  }
  return list
})

const getColor = num => {
  if (num >= 0.85) {
    return '#8BC8FF'
  } else if (num >= 0.6) {
    return '#FFD879'
  } else {
    return '#FF7B73'
  }
}

const getIndex = title => {
  return Number(title.split('__')[0])
}

const getData = async () => {
  const { data } = await getKnowledgeDetail(situationReport.search)
  dataList.value = data?.list || []
}

onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
@import '../style.less';

.mastering-situation {
  width: 100%;
  height: 97%;
  background: @gray-background-color;

  .operate {
    &__icon {
      background: url('@/assets/images/situation-report/export.png') no-repeat
        center/cover;
      margin-right: 8px;
    }
  }

  .rate-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 31px;
  }
}
</style>
